<template>
  <a-row :gutter="10">
    <a-col :md="24" :sm="24" style="margin-bottom: 20px">
      <a-card :bordered="false">


        <!-- <div class="table-page-search-submitButtons" style="text-align: left;color: #fff;">
          <a-button type="primary" icon="plus" @click="addTask">新建任务</a-button>
        </div> -->


        <!-- 任务中心 -->
        <div style="margin-top: 15px;  ">
          <a-row type="flex" :gutter="16">

            <!-- 任务详情 -->
            <a-col flex="auto">
              <div class="TaskManagement_right_top_header_box">
                <div class="icon_box">
                  <i class="iconfont icon-yueyongdianliangbili"></i>
                </div>
                <div class="TaskManagement_right_top_header_box_name">
                  <div class="name_val" style="margin-left: 10px;">任务中心</div>
                </div>
              </div>


              <a-form class="form_" layout="inline" @keyup.enter.native="searchQuery" style="margin: 15px 0;">
                <a-row :gutter="24">

                  <a-col :span="1">
                    <div class="table-page-search-submitButtons" style="margin: 0 0 0px 10px;">
                      <a-button type="primary" icon="plus" @click="addTask">新建任务</a-button>
                    </div>
                  </a-col>


                  <a-col :span="4">
                    <a-form-item>
                      <a-tooltip :trigger="['focus']" placement="bottomLeft" overlay-class-name="numeric-input"
                        >
                        <!-- <span v-if="queryParam.username" slot="title" class="numeric-input-title">
                  {{ queryParam.username !== "-" ? formatNumber(queryParam.username) : "-" }}
                </span> -->
                        <template slot="title"> 请输入名称查询 </template>
                        <a-input placeholder="请输入名称查询" v-model="queryParam.username" style="margin-left: 25px;"></a-input>
                      </a-tooltip>
                    </a-form-item>
                  </a-col>
                  <!-- <a-col :span="4">
              <a-form-item class="ant-form-item">
                <a-select v-model="queryParam.sex" placeholder="请选择性别">
                  <a-select-option value="">请选择</a-select-option>
                  <a-select-option value="1">男</a-select-option>
                  <a-select-option value="2">女</a-select-option>
                </a-select>
              </a-form-item>
            </a-col> -->
                  <template v-if="toggleSearchStatus">
                    <a-col :span="4">
                      <a-form-item>
                        <a-input placeholder="请输入时间查询" v-model="queryParam.realname"></a-input>
                      </a-form-item>
                    </a-col>
                    <!-- <a-col :span="4">
                <a-form-item>
                  <a-input placeholder="请输入手机号码查询" v-model="queryParam.phone"></a-input>
                </a-form-item>
              </a-col> -->
                    <!-- <a-col :span="4">
                <a-form-item>
                  <a-select v-model="queryParam.status" placeholder="请选择">
                    <a-select-option value="">请选择</a-select-option>
                    <a-select-option value="1">正常</a-select-option>
                    <a-select-option value="2">冻结</a-select-option>
                  </a-select>
                </a-form-item>
              </a-col> -->
                  </template>

                  <a-col :span="4">
                    <span style="float: left; overflow: hidden" class="table-page-search-submitButtons">
                      <a-button @click="searchQueryList" icon="search">查询</a-button>
                      <a-button class="last" @click="searchReset" icon="reload">重置</a-button>
                      <a @click="handleToggleSearch" style="margin-left: 8px">
                        {{ toggleSearchStatus ? "收起" : "展开" }}
                        <a-icon :type="toggleSearchStatus ? 'up' : 'down'" />
                      </a>
                    </span>
                  </a-col>
                </a-row>
              </a-form>


              <a-table style="height: 600px;padding-left: 10px;" ref="table" size="middle" rowKey="id" :columns="columns"
                :dataSource="dataSource" :pagination="ipagination"
                :rowSelection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }">

                <!-- 操作 -->
                <span slot="action" slot-scope="text, record">
                  <!-- <a-popconfirm placement="topRight" ok-text="确定" cancel-text="取消" @confirm="confirm"
                    v-if="record.action.includes('edit')">
                    <template slot="title">
                      <p>请确定任务传送开始？</p>
                    </template>
                    <a class="action-btn">开始</a>
                  </a-popconfirm> -->
                  <!-- <a>&nbsp;&nbsp;</a> -->

                  <!-- <a-popconfirm placement="topRight" ok-text="确定" cancel-text="取消" @confirm="confirm"
                    v-if="record.action.includes('edit')">
                    <template slot="title">
                      <p>请确定任务传送，需停止？</p>
                    </template>
                    <a class="action-btn">停止</a>
                  </a-popconfirm> -->
                  <!-- <a>&nbsp;&nbsp;</a> -->

                  <a v-if="record.action.includes('edit')" class="action-btn" @click="editTask(record)">修改</a>

                  <a-popconfirm placement="topRight" ok-text="确定" cancel-text="取消" @confirm="confirm(record)"
                    @cancel="cancel" v-if="record.action.includes('del')">
                    <template slot="title">
                      <p>你确定要删除这条数据吗?</p>
                    </template>
                    <a class="action-btn">删除</a>
                  </a-popconfirm>

                  <a>&nbsp;&nbsp;</a>

                </span>
              </a-table>
            </a-col>
          </a-row>
        </div>
        <AddTable ref="modalForm" @ok="modalFormOk"></AddTable>

      </a-card>
    </a-col>
  </a-row>
</template>
<script>
import AddTable from './AddTable'
import {
  ListMixin
} from '@/mixins/ListMixin'


import axios from 'axios'

export default {
  name: '',
  mixins: [ListMixin],
  data() {
    return {
      queryParam: {
        username: '',
      },
      columns: [],
      dataSource: [],
      selectedRowKeys: [],
      // 分页器
      ipagination: {
        current: 1,
        pageSize: 10,
        pageSizeOptions: ['10', '20', '30'],
        showTotal: (total, range) => {
          return range[0] + '-' + range[1] + ' 共' + total + '条'
        },
        showQuickJumper: true,
        showSizeChanger: true,
        total: 0,
        tabAryLength: '',
        paramsInfo: {},
        tit: 'new'
      },
    }
  },

  components: {
    AddTable
  },

  created() {
    this.getDataColumn()
    this.getTaskList()
  },

  mounted() {
    this.$bus.$on('paramsInfo', (par) => {
      this.dataSource.push(par)
      console.log(11111)
      console.log(par, 'parparparpaiejiejijisjgiosjfljgfoigneoigi')
    })

    let ress = JSON.parse(localStorage.getItem('formInfoValue'))
    this.dataSource.push(ress)
    console.log(2222)
  },

  watch: {
    'queryParam.username'(newVal, oldVal) {
      if (newVal.length < oldVal.length || newVal === '') {
        this.getTaskList()
      }
    }
  },


  methods: {

    searchQueryList() {
      if (this.queryParam.username == '') {
        this.getTaskList()
      } else {
        this.dataSource = this.dataSource.filter(item => {
          return item.taskName.includes(this.queryParam.username)
        })
      }
    },

    getDataColumn() {
      this.$nextTick(async () => {
        const result = await axios.get('/mock/dataColumns')
        console.log(result, 'result//////数据888888888888')
        this.columns = result.data.data
      })
    },


    getTaskList() {
      this.$nextTick(async () => {
        const result = await axios.get('/mock/dataTab')
        console.log(result, 'result//////数据')
        this.dataSource = result.data.data.dataSource
      })
    },
    // 添加弹框
    addTask() {
      this.$bus.$emit('pages', 0)

      this.$refs.modalForm.add()


      // console.log(this.paramsInfo, '是否有值')
      // this.paramsInfo.taskName = ''
      // this.paramsInfo.scope3 = ''
      // this.paramsInfo.scope4 = ''
    },

    modalFormOk() {
      // 新增/修改 成功时，重载列表
      this.loadData2()
    },

    onSelectChange(selectedRowKeys) {
      this.selectedRowKeys = selectedRowKeys;
    },

    onSelectChange(selectedRowKeys) {
      this.selectedRowKeys = selectedRowKeys;
    },

    // 删除
    confirm(record) {
      // this.dataSource.splice(record, 1)
      this.dataSource = this.dataSource.filter(item => {
        return item.scope2 != record.scope2
      })
      console.log(record)
      // console.log(record, 'recordrecord删除')
      this.$message.success('删除成功')
    },
    // 取消删除
    cancel() {
      this.$message.error('取消删除')
    },
  }
}
</script>


<style scoped lang="scss">
@import '@/assets/css/listcommon.scss';

/* @import '~@assets/less/common.less'; */
/** Button按钮间距 */
.ant-btn,
.action-btn {
  margin-left: 8px;

  &:first-child {
    margin-left: 0;
  }
}

::v-deep .ant-table .ant-table-body .ant-table-thead .ant-table-selection-column {
  text-align: center !important;
}

::v-deep .ant-table-thead>tr>th .anticon-filter,
.ant-table-thead>tr>th .ant-table-filter-icon {
  left: 60px !important;
}

.breadcrumb {
  padding: 10px 15px;
  border: 1px solid #eee;
  margin-bottom: 15px;
}

.table-page-search-submitButtons .ant-btn {
  border: 1px solid rgb(209, 208, 208) !important;
}

.table-page-search-submitButtons .ant-btn-primary {
  // color: #fff !important;
  color: #fff !important;
  background: #1890ff !important;
}

::v-deep .ant-spin-container .ant-pagination.mini .ant-pagination-total-text {
  position: absolute;
  left: 0;
}

.table-page-search-wrapper .header_right {
  justify-content: flex-start;
}

:deep .ant-badge-status-error {
  //background-color:rgba($color: #000000, $alpha: 0);
  display: none !important;
}

:deep .ant-badge-status-processing {
  display: none !important;
}

:deep .ant-badge-status-success {
  display: none !important;
}

.TaskManagement_left_top_name {
  display: flex;
  flex-direction: row;
  align-items: center;
  height: 60px;
  margin: 0px 0px;
  background-color: #f3f3f3;
  //background-color: #f3f3f3;
  // margin-bottom: 10px;

  // .icon_box {
  //   width: 40px;
  //   height: 40px;
  //   background: #4bc076;
  //   border-radius: 10px;
  //   margin-left: 20px;

  //   i {
  //     color: #fff;
  //     font-size: 26px;
  //     padding-top: 15px;
  //   }
  // }

  .name {
    margin-left: 6px;
    font-size: 18px;
    font-weight: 600;
  }
}

.TaskManagement_right_top_header_box {
  display: flex;
  flex-direction: row;
  padding: 5px 0;
  margin-left: 10px;
  align-items: center;
  // background-color: #f3f3f3;
  border-radius: 5px 5px 0 0;

  .icon_box {
    width: 30px;
    height: 30px;
    background: linear-gradient(rgb(1, 209, 180), rgb(0, 194, 167));
    border-radius: 5px;
    // margin-right: 10px;
    margin-left: 10px 0;
    position: relative;

    i {
      color: #fff;
      font-size: 20px;
      padding-top: 15px;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -65%);
    }
  }

  .TaskManagement_right_top_header_box_name {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;

    .name {
      font-size: 14px;
    }

    .name_val {
      font-size: 18px;
      font-weight: 600;
    }
  }
}
</style>


